<!DOCTYPE html>
<html class="loading" lang="zh" data-textdirection="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="author" content="HXG">
  <title>生成结算单</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>
<body>
<div class="content-wrapper">
  <div class="content-header">
    <div class="content-header-left mb-2 clearfix">
      <h3 class="content-header-title mb-0">生成结算单</h3>
    </div>
  </div>
  
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <!-- 生成结算单按钮 -->
        <!-- <div class="row mb-3">
          <div class="col-12">
            <button id="generateStatementBtn" class="btn btn-primary">
              <i class="fa fa-file-text"></i> 手动生成结算单
            </button>
          </div>
        </div> -->
        
        <!-- 时间筛选 -->
        <!-- <div class="row mb-3">
          <div class="col-md-4">
            <label for="yearSelect">选择年份:</label>
            <select id="yearSelect" class="form-control">
              <option value="2024">2024年</option>
              <option value="2023">2023年</option>
              <option value="2022">2022年</option>
            </select>
          </div>
          <div class="col-md-4">
            <label for="monthSelect">选择月份:</label>
            <select id="monthSelect" class="form-control">
              <option value="1">1月</option>
              <option value="2">2月</option>
              <option value="3">3月</option>
              <option value="4">4月</option>
              <option value="5">5月</option>
              <option value="6">6月</option>
              <option value="7">7月</option>
              <option value="8">8月</option>
              <option value="9">9月</option>
              <option value="10">10月</option>
              <option value="11">11月</option>
              <option value="12">12月</option>
            </select>
          </div>
          <div class="col-md-4">
            <label>&nbsp;</label>
            <div>
              <button id="filterBtn" class="btn btn-info">筛选</button>
            </div>
          </div>
        </div> -->
        
        <!-- 供应商结算汇总表 -->
        <div class="table-responsive mb-4">
          <h4 class="mb-3">供应商月度结算汇总</h4>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>供应商ID</th>
                <th>供应商名称</th>
                <th>联系人</th>
                <th>联系电话</th>
                <th>统计月份</th>
                <th>月度结算金额</th>
                <th>订单数量</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="supplierSummaryTable">
              <!-- 动态填充数据 -->
            
            </tbody>
          </table>
        </div>
        
        <!-- 订单详情区域 -->
        <div id="ordersDetailSection" class="collapse">
          <h4 class="mb-3">订单详情 (<span id="supplierNameTitle">供应商名称</span>)</h4>
          <div class="table-responsive">
            <table class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>订单ID</th>
                  <th>订单日期</th>
                  <th>订单金额</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="ordersDetailTable">
                <!-- 动态填充数据 -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 订单详情模态框 -->
<div class="modal fade" id="orderDetailModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">订单详细信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h6>订单号: <span id="modalOrderId"></span></h6>
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
              </tr>
            </thead>
            <tbody id="orderItemsTable">
              <!-- 动态填充数据 -->
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>

<script>
  const apiUrl = 'http://127.0.0.1:25080';
  // 页面加载完成后执行
  $(document).ready(function() { 
    $(function() {
      getStatement();
    });
  });

  //获取结算单
  function getStatement() {
    $.ajax({
      url: apiUrl+'/purchaseSettlement/list',
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        console.log(data);
        // 处理返回的数据
        if(data.code === 200){
          // 填充数据
          $('#supplierSummaryTable').empty();
          data.data.forEach(function(item) {
            // 动态设置状态颜色
              let color = '';
              switch (item.settlementStatus) {
                case '0':
                color = 'red'; // 红色
                  break;
                case '1':
                color = 'blue'; // 蓝色
                  break;
                case '2':
                color = 'green'; // 绿色
                  break;
                default:
                color = 'orange'; //橘色
                  break;
              }
            let tr =`<tr>
                <td>${item.supplierId}</td>
                <td>${item.supplierName}</td>
                <td>${item.contactName}</td>
                <td>${item.contactPhone}</td>
                <td>${item.month}</td>
                <td>${item.settlementAmount}</td>
                <td>${item.orderCount}</td>
                <td style='color:${color}'>${item.settlementStatus=='0'?'未结算':'已结算'}</td>
                <td>
                  <button class="btn btn-sm btn-primary view-orders" data-supplier-id="${item.supplierId}" data-month="${item.month}">
                    查看订单
                  </button>
                  <button class="btn btn-sm btn-primary view-detail" data-order-id="${item.psId}">
                    结算
                  </button>
                </td>
              
              </tr>`;
              $('#supplierSummaryTable').append(tr);
          })
        }
      },
      error: function(xhr, status, error) {
        // 处理错误
      }
    });
  }

  //点击查看订单按钮
  $(document).on('click', '.view-orders', function() { 
    let supplierId = $(this).data('supplier-id');
    let month = $(this).data('month');
    $.ajax({
      url: apiUrl+'/purchaseOrders/supplierOrderGroup',
      method: 'GET',
      data: {
        supplierId: supplierId,
        month: month
      },
      dataType: 'json',
      success: function(data) {
        console.log('订单---',data);
        // 处理返回的数据
        if(data.code === 200){
          // 填充数据
          $('#ordersDetailTable').empty();
          data.data.forEach(function(item) {
            let tr =`<tr>
                <td>${item.orderId}</td>
                <td>${item.orderDate}</td>
                <td>${item.totalAmount}</td>
                <td style = 'color: green'>
                
                  ${item.status=='2'?'已完成' :'未知'}
                  </td>
                <td>
                  <button class="btn btn-sm btn-primary view-detail" data-order-id="${item.orderId}" data-supplier-id="${item.supplierId}">
                    查看详情
                  </button> 
                </td> 
                <tr>`;
            $('#ordersDetailTable').append(tr);
          })
          $('#supplierNameTitle').text(data.data[0].supplierName);
          $('#ordersDetailSection').collapse('show');
        }
      }
    })
  });
  // 点击查看详情按钮
  $(document).on('click', '.view-detail', function() {
    let orderId = $(this).data('order-id');
    let supplierId = $(this).data('supplier-id');
    $.ajax({
      url: apiUrl+'/purchaseOrderDetails/selectOrderDetails/'+orderId+'/'+supplierId,
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        console.log('订单详情---',data);
        // 处理返回的数据
        if(data.code === 200){
          // 填充数据
          $('#orderItemsTable').empty();
          data.data.forEach(function(item) { 
            let tr =`<tr>
                <td>${item.productName}</td>
                <td>${item.unitPrice}</td>
                <td>${item.quantity}</td>
                <td>${item.subtotal}</td>
              </tr>`;
              $('#orderItemsTable').append(tr);
              $('#modalOrderId').text(orderId);
              $('#orderDetailModal').modal('show');
          })
          
        }
      }
    })
  }); 


  // document.addEventListener('DOMContentLoaded', function() {
  //   // 生成结算单按钮事件
  //   document.getElementById('generateStatementBtn').addEventListener('click', function() {
  //     Swal.fire({
  //       title: '确认生成结算单?',
  //       text: '确定要手动生成当前月份的结算单吗？',
  //       icon: 'question',
  //       showCancelButton: true,
  //       confirmButtonText: '确认生成',
  //       cancelButtonText: '取消'
  //     }).then((result) => {
  //       if (result.isConfirmed) {
  //         // 这里应该调用后端API生成结算单
  //         Swal.fire({
  //           title: '结算单已生成!',
  //           text: '月度结算单已成功生成',
  //           icon: 'success',
  //           confirmButtonText: '确定'
  //         });
  //       }
  //     });
  //   });
    
  //   // 筛选按钮事件
  //   document.getElementById('filterBtn').addEventListener('click', function() {
  //     const year = document.getElementById('yearSelect').value;
  //     const month = document.getElementById('monthSelect').value;
  //     // 这里应该重新加载数据
  //     console.log(`筛选 ${year} 年 ${month} 月的数据`);
  //   });
    
  //   // 查看订单按钮事件
  //   document.querySelectorAll('.view-orders').forEach(button => {
  //     button.addEventListener('click', function() {
  //       const supplierId = this.getAttribute('data-supplier-id');
  //       const supplierName = this.closest('tr').querySelector('td:nth-child(2)').textContent;
        
  //       // 设置标题
  //       document.getElementById('supplierNameTitle').textContent = supplierName;
        
  //       // 显示订单详情区域
  //       document.getElementById('ordersDetailSection').classList.add('show');
        
  //       // 模拟加载订单数据
  //       loadOrdersData(supplierId);
  //     });
  //   });
    
  //   // 模拟加载订单数据
  //   function loadOrdersData(supplierId) {
  //     // 清空现有数据
  //     document.getElementById('ordersDetailTable').innerHTML = '';
      
  //     // 模拟数据
  //     const orders = [
  //       { id: 'PO20241001', date: '2024-10-01', quantity: 120, amount: '¥5,200.00', status: '已完成' },
  //       { id: 'PO20241008', date: '2024-10-08', quantity: 85, amount: '¥3,800.00', status: '已完成' },
  //       { id: 'PO20241015', date: '2024-10-15', quantity: 210, amount: '¥8,900.00', status: '已完成' },
  //       { id: 'PO20241022', date: '2024-10-22', quantity: 95, amount: '¥6,780.00', status: '已完成' }
  //     ];
      
  //     orders.forEach(order => {
  //       const row = `
  //         <tr>
  //           <td><a href="#" class="order-detail-link" data-order-id="${order.id}">${order.id}</a></td>
  //           <td>${order.date}</td>
  //           <td>${order.quantity}</td>
  //           <td>${order.amount}</td>
  //           <td><span class="badge badge-success">${order.status}</span></td>
  //         </tr>
  //       `;
  //       document.getElementById('ordersDetailTable').insertAdjacentHTML('beforeend', row);
  //     });
      
  //     // 绑定订单详情链接事件
  //     document.querySelectorAll('.order-detail-link').forEach(link => {
  //       link.addEventListener('click', function(e) {
  //         e.preventDefault();
  //         const orderId = this.getAttribute('data-order-id');
  //         showOrderDetail(orderId);
  //       });
  //     });
  //   }
    
  //   // 显示订单详情
  //   function showOrderDetail(orderId) {
  //     document.getElementById('modalOrderId').textContent = orderId;
      
  //     // 清空现有数据
  //     document.getElementById('orderItemsTable').innerHTML = '';
      
  //     // 模拟订单项数据
  //     const items = [
  //       { name: '可口可乐500ml', price: '¥3.50', quantity: 24, subtotal: '¥84.00' },
  //       { name: '雪碧500ml', price: '¥3.50', quantity: 24, subtotal: '¥84.00' },
  //       { name: '芬达橙味500ml', price: '¥3.50', quantity: 24, subtotal: '¥84.00' },
  //       { name: '醒目柠檬茶500ml', price: '¥4.00', quantity: 24, subtotal: '¥96.00' },
  //       { name: '冰红茶500ml', price: '¥4.00', quantity: 24, subtotal: '¥96.00' }
  //     ];
      
  //     items.forEach(item => {
  //       const row = `
  //         <tr>
  //           <td>${item.name}</td>
  //           <td>${item.price}</td>
  //           <td>${item.quantity}</td>
  //           <td>${item.subtotal}</td>
  //         </tr>
  //       `;
  //       document.getElementById('orderItemsTable').insertAdjacentHTML('beforeend', row);
  //     });
      
  //     // 显示模态框
  //     $('#orderDetailModal').modal('show');
  //   }
  // });
</script>
</body>
</html>